<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="screen">
#content {
	width: 960px;
	margin: 5px auto;
}

#left {
	background: #FFF;
	height: auto;
	width: 690px;
	float: left;
}

#right {
	background: #FFF;
	height: auto;
	width: 260px;
	float: right;
}

.select {
	width: 150px;
}
</style>
<script type="text/javascript" src="../../js/jquery.min.js"></script>

<script type="text/javascript" src="../../js/highcharts.js"></script>

<script type="text/javascript" src="../../js/modules/exporting.js"></script>

<script type="text/javascript">
	var chart;
	$(document).ready(
			function() {
				chart = new Highcharts.Chart(
						{
							chart : {
								renderTo : 'container',
								defaultSeriesType : 'line',
								marginRight : 130,
								marginBottom : 25
							},
							title : {
								text : '排面YTD数据',
								x : -20
							//center
							},
							subtitle : {
								text : 'demo数据',
								x : -20
							},
							xAxis : {
								categories : [ 'Jan', 'Feb', 'Mar', 'Apr',
										'May', 'Jun', 'Jul', 'Aug', 'Sep',
										'Oct', 'Nov', 'Dec' ]
							},
							yAxis : {
								title : {
									text : '排面'
								},
								plotLines : [ {
									value : 0,
									width : 1,
									color : '#808080'
								} ]
							},
							tooltip : {
								formatter : function() {
									return '<b>' + this.series.name
											+ '</b><br/>' + this.x + ': '
											+ this.y + '';
								}
							},
							legend : {
								layout : 'vertical',
								align : 'right',
								verticalAlign : 'top',
								x : -10,
								y : 100,
								borderWidth : 0
							},
							series : [
									{
										name : 'Product A',
										data : [ 50, 30, 80, 60, 80, 52, 88,
												44, 23, 98, 58, 96 ]
									},
									{
										name : 'Product B',
										data : [ -0.2, 0.8, 5.7, 11.3, 17.0,
												22.0, 24.8, 24.1, 20.1, 14.1,
												8.6, 2.5 ]
									},
									{
										name : 'Product C',
										data : [ -0.9, 0.6, 3.5, 8.4, 13.5,
												17.0, 18.6, 17.9, 14.3, 9.0,
												3.9, 1.0 ]
									},
									{
										name : 'Product D',
										data : [ 3.9, 4.2, 5.7, 8.5, 11.9,
												15.2, 17.0, 16.6, 14.2, 10.3,
												6.6, 4.8 ]
									},
									{
										name : 'Product E',
										data : [ 3.9, 4.2, 5.7, 8.5, 11.9,
												15.2, 17.0, 16.6, 14.2, 10.3,
												6.6, 4.8 ]
									},
									{
										name : 'Product F',
										data : [ 3.9, 4.2, 5.7, 8.5, 11.9,
												15.2, 17.0, 16.6, 14.2, 10.3,
												6.6, 4.8 ]
									},
									{
										name : 'Product G',
										data : [ 3.9, 4.2, 5.7, 8.5, 11.9,
												15.2, 17.0, 16.6, 14.2, 10.3,
												6.6, 4.8 ]
									},
									{
										name : 'Product H',
										data : [ 3.9, 4.2, 5.7, 8.5, 11.9,
												15.2, 17.0, 16.6, 14.2, 10.3,
												6.6, 4.8 ]
									},
									{
										name : 'Product I',
										data : [ 3.9, 4.2, 5.7, 8.5, 11.9,
												15.2, 17.0, 16.6, 14.2, 10.3,
												6.6, 4.8 ]
									} ]
						});

			});
	var chart1;
	$(document).ready(
			function() {
				chart1 = new Highcharts.Chart(
						{
							chart : {
								renderTo : 'container1',
								defaultSeriesType : 'line',
								marginRight : 130,
								marginBottom : 25
							},
							title : {
								text : 'Product A 排面YTD数据',
								x : -20
							//center
							},
							subtitle : {
								text : 'demo数据',
								x : -20
							},
							xAxis : {
								categories : [ '1', '2', '3', '4', '5', '6',
										'7', '8', '9', '10', '11', '12' ]
							},
							yAxis : {
								title : {
									text : '排面'
								},
								plotLines : [ {
									value : 0,
									width : 1,
									color : '#808080'
								} ]
							},
							tooltip : {
								formatter : function() {
									return '<b>' + this.series.name
											+ '</b><br/>' + this.x + '月: '
											+ this.y + '';
								}
							},
							legend : {
								layout : 'vertical',
								align : 'right',
								verticalAlign : 'top',
								x : -10,
								y : 100,
								borderWidth : 0
							},
							series : [ {
								name : 'Product A',
								data : [ 50, 30, 80, 60, 80, 52, 88, 44, 23,
										98, 58, 96 ]
							} ]
						});

			});

	var chart2;
	$(document).ready(
			function() {
				chart2 = new Highcharts.Chart({
					chart : {
						renderTo : 'container2',
						defaultSeriesType : 'line',
						marginRight : 130,
						marginBottom : 25
					},
					title : {
						text : 'Product C 排面YTD数据',
						x : -20
					//center
					},
					subtitle : {
						text : 'demo数据',
						x : -20
					},
					xAxis : {
						categories : [ '1', '2', '3', '4', '5', '6', '7', '8',
								'9', '10', '11', '12' ]
					},
					yAxis : {
						title : {
							text : '排面'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>'
									+ this.x + '月: ' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 100,
						borderWidth : 0
					},
					series : [ {
						name : 'Product B',
						data : [ 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1,
								20.1, 14.1, 8.6, 2.5 ]
					} ]
				});

			});

	var chart3;
	$(document).ready(
			function() {
				chart3 = new Highcharts.Chart({
					chart : {
						renderTo : 'container3',
						defaultSeriesType : 'line',
						marginRight : 130,
						marginBottom : 25
					},
					title : {
						text : 'Product B 排面YTD数据',
						x : -20
					//center
					},
					subtitle : {
						text : 'demo数据',
						x : -20
					},
					xAxis : {
						categories : [ '1', '2', '3', '4', '5', '6', '7', '8',
								'9', '10', '11', '12' ]
					},
					yAxis : {
						title : {
							text : '排面'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>'
									+ this.x + '月: ' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 100,
						borderWidth : 0
					},
					series : [ {
						name : 'Product B',
						data : [ 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1,
								20.1, 14.1, 8.6, 2.5 ]
					} ]
				});

			});

	var chart4;
	$(document).ready(
			function() {
				chart4 = new Highcharts.Chart({
					chart : {
						renderTo : 'container4',
						defaultSeriesType : 'line',
						marginRight : 130,
						marginBottom : 25
					},
					title : {
						text : 'Product B 排面YTD数据',
						x : -20
					//center
					},
					subtitle : {
						text : 'demo数据',
						x : -20
					},
					xAxis : {
						categories : [ '1', '2', '3', '4', '5', '6', '7', '8',
								'9', '10', '11', '12' ]
					},
					yAxis : {
						title : {
							text : '排面'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>'
									+ this.x + '月: ' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 100,
						borderWidth : 0
					},
					series : [ {
						name : 'Product B',
						data : [ 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1,
								20.1, 14.1, 8.6, 2.5 ]
					} ]
				});

			});

	var chart5;
	$(document).ready(
			function() {
				chart5 = new Highcharts.Chart({
					chart : {
						renderTo : 'container5',
						defaultSeriesType : 'line',
						marginRight : 130,
						marginBottom : 25
					},
					title : {
						text : 'Product B 排面YTD数据',
						x : -20
					//center
					},
					subtitle : {
						text : 'demo数据',
						x : -20
					},
					xAxis : {
						categories : [ '1', '2', '3', '4', '5', '6', '7', '8',
								'9', '10', '11', '12' ]
					},
					yAxis : {
						title : {
							text : '排面'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>'
									+ this.x + '月: ' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 100,
						borderWidth : 0
					},
					series : [ {
						name : 'Product B',
						data : [ 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1,
								20.1, 14.1, 8.6, 2.5 ]
					} ]
				});

			});

	var chart6;
	$(document).ready(
			function() {
				chart6 = new Highcharts.Chart({
					chart : {
						renderTo : 'container6',
						defaultSeriesType : 'line',
						marginRight : 130,
						marginBottom : 25
					},
					title : {
						text : 'Product B 排面YTD数据',
						x : -20
					//center
					},
					subtitle : {
						text : 'demo数据',
						x : -20
					},
					xAxis : {
						categories : [ '1', '2', '3', '4', '5', '6', '7', '8',
								'9', '10', '11', '12' ]
					},
					yAxis : {
						title : {
							text : '排面'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>'
									+ this.x + '月: ' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 100,
						borderWidth : 0
					},
					series : [ {
						name : 'Product B',
						data : [ 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1,
								20.1, 14.1, 8.6, 2.5 ]
					} ]
				});

			});

	var chart7;
	$(document).ready(
			function() {
				chart7 = new Highcharts.Chart({
					chart : {
						renderTo : 'container7',
						defaultSeriesType : 'line',
						marginRight : 130,
						marginBottom : 25
					},
					title : {
						text : 'Product B 排面YTD数据',
						x : -20
					//center
					},
					subtitle : {
						text : 'demo数据',
						x : -20
					},
					xAxis : {
						categories : [ '1', '2', '3', '4', '5', '6', '7', '8',
								'9', '10', '11', '12' ]
					},
					yAxis : {
						title : {
							text : '排面'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>'
									+ this.x + '月: ' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 100,
						borderWidth : 0
					},
					series : [ {
						name : 'Product B',
						data : [ 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1,
								20.1, 14.1, 8.6, 2.5 ]
					} ]
				});

			});
	var chart8;
	$(document).ready(
			function() {
				chart8 = new Highcharts.Chart({
					chart : {
						renderTo : 'container8',
						defaultSeriesType : 'line',
						marginRight : 130,
						marginBottom : 25
					},
					title : {
						text : 'Product B 排面YTD数据',
						x : -20
					//center
					},
					subtitle : {
						text : 'demo数据',
						x : -20
					},
					xAxis : {
						categories : [ '1', '2', '3', '4', '5', '6', '7', '8',
								'9', '10', '11', '12' ]
					},
					yAxis : {
						title : {
							text : '排面'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>'
									+ this.x + '月: ' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 100,
						borderWidth : 0
					},
					series : [ {
						name : 'Product B',
						data : [ 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1,
								20.1, 14.1, 8.6, 2.5 ]
					} ]
				});

			});

	var chart9;
	$(document).ready(
			function() {
				chart9 = new Highcharts.Chart({
					chart : {
						renderTo : 'container9',
						defaultSeriesType : 'line',
						marginRight : 130,
						marginBottom : 25
					},
					title : {
						text : 'Product B 排面YTD数据',
						x : -20
					//center
					},
					subtitle : {
						text : 'demo数据',
						x : -20
					},
					xAxis : {
						categories : [ '1', '2', '3', '4', '5', '6', '7', '8',
								'9', '10', '11', '12' ]
					},
					yAxis : {
						title : {
							text : '排面'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.series.name + '</b><br/>'
									+ this.x + '月: ' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'top',
						x : -10,
						y : 100,
						borderWidth : 0
					},
					series : [ {
						name : 'Product B',
						data : [ 0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1,
								20.1, 14.1, 8.6, 2.5 ]
					} ]
				});

			});
</script>




</head>

<body>

	<div align="center">

		<div
			style="width: 960px; height: 100px; background-image: url(../../images/title.png)">
		</div>

		<div align="left" style="width: 960px">
			<p>
				<a href="../../home.html">首页</a>&nbsp;&gt;&gt;&nbsp;排面
			</p>
		</div>

		<div id="content">
			<div id="left" align="center">
				<div id="container"
					style="width: 680px; height: 400px; margin: 0 auto"></div>

			</div>
			<div id="right" align="center">
				<table border="0" cellspacing="5">
					<tr>
						<td width="80" align="right">Month&nbsp;&nbsp;</td>
						<td width="176"><select name="Month" class="select">
								<option value="January">January</option>
								<option value="February">February</option>
								<option value="March">March</option>
								<option value="April">April</option>
						</select>
						</td>
					</tr>
					<tr>
						<td align="right">System&nbsp;&nbsp;</td>
						<td><select name="System" class="select">
								<option value="沃尔玛">沃尔玛</option>
								<option value="家乐福">家乐福</option>
								<option value="好又多">好又多</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">Region&nbsp;&nbsp;</td>
						<td><select name="Region" class="select">
								<option value="All">All</option>
								<option value="East">East</option>
								<option value="West">West</option>
								<option value="South">South</option>
								<option value="North">North</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">Area&nbsp;&nbsp;</td>
						<td><select name="Area" class="select">
								<option value="All">All</option>
								<option value="Shanghai">Shanghai</option>
								<option value="Beijing">Beijing</option>
								<option value="Anhui">Anhui</option>
						</select></td>
					</tr>
					<tr>
						<td align="right">City&nbsp;&nbsp;</td>
						<td><select name="City" class="select">
								<option value="All">All</option>
								<option value="Shanghai">Shanghai</option>
								<option value="Beijing">Beijing</option>
								<option value="Wuhu">Wuhu</option>
						</select></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><map name="mymap">
								<area shape="rect" coords="95,3,153,22" href="rack_ytd.html" />
								<area shape="rect" coords="2,1,65,21" href="rack.html" />
							</map> <img src="../../images/BT_mtd_ytd.PNG" width="156" height="24"
							border="0" usemap="#mymap" /></td>
					</tr>
				</table>


			</div>

		</div>
		<table width=100% border="0px">
			<tr>
				<td align="center">

					<table border="0" style="margin: auto;">
						<tr>
							<td width="320">
								<div id="container1"
									style="width: 320px; height: 200px; margin: 0 auto"></div>
							</td>
							<td width="320">
								<div id="container2"
									style="width: 320px; height: 200px; margin: 0 auto"></div>
							</td>
							<td width="320">
								<div id="container3"
									style="width: 320px; height: 200px; margin: 0 auto"></div>
							</td>
						</tr>
						<tr>
							<td><div id="container4"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td><div id="container5"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td><div id="container6"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
						</tr>
						<tr>
							<td><div id="container7"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td><div id="container8"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td><div id="container9"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
						</tr>
					</table></td>
			</tr>
		</table>
	</div>

</body>
</html>
